﻿@{
    ViewBag.Title = "TreeView : Add and Remove Nodes";
}

<h2>TreeView : Add and Remove Nodes</h2>

<div id="divFunctions" style="visibility:hidden;padding-bottom:20px;">
    <div style="padding-bottom:5px;">
        <button id="addNodeButton" onclick="addNodeButton_onClick();" style="padding-right:20px;">Add Node Extended Client API</button>
        <button id="removeNodeButton" onclick="removeNodeButton_onClick();" style="padding-right:20px;">Remove Node Extended Client API</button>
    </div>
</div>

@{
    Html.Telerik().TreeView()
        .Name("MyTreeView")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("SelectTreeItems", "TreeView")
        )
        .ClientEvents(events => events.OnDataBound("MyTreeView_OnDataBound"))
        .Render();
}

<script type="text/javascript">

    MyTreeView_OnDataBound = function (e) {
        $('#divFunctions').css('visibility', 'visible');
    }

    addNodeButton_onClick = function () {
        var treeView = $('#MyTreeView').data('tTreeView');
        var node = treeView.findNodeByText('Extended Client API');
        if (node.length == 0) {
            node = treeView.findNodeByText('ASP.NET MVC');
            var newNode = node.addNode({ text: 'Extended Client API', value: 100, url: 'http://telerikmvcextendedjs.codeplex.com/' });
            console.log(newNode);
            newNode.highlight();
            alert('The Extended Client API node has been added to the ASP.NET MVC node.');
        } else {
            alert('The Extended Client API node has already been added.');
        }
    }

    removeNodeButton_onClick = function () {
        var treeView = $('#MyTreeView').data('tTreeView');
        var node = treeView.findNodeByText('Extended Client API');
        if (node.length == 0) {
            alert('The Extended Client API node was not found in the tree.');
        } else {
            node.remove();
            alert('The Extended Client API node has been removed.');
        }
    }

</script>